<template>
	<view class="j_cont">
		<!-- 导航栏 -->
		<view class="j_top">
			<!-- 跳转图标 -->
			<view class="j_left_icon">
				<text @click="back">&lt;</text>
			</view>
			<!-- 标题 -->
			<view class="j_title">
				评价
			</view>
			<!-- right -->
			<view class="j_ttip">
				<text @click="release" v-if="one">确定</text>
				<text v-if="two">已评价</text>
			</view>
		</view>
		<!-- 评价 -->
		<view class="j_evaluate">
			<!-- top -->
			<view class="j_tops">
				<text class="j_once">产品</text>
				<text>积分</text>
				<text>+1</text>
			</view>
			<!-- bottom -->
			<view class="j_bottoms">
				<view v-for="item in list" :key="item.id" @click="change(item.name)"
					:class="satisfied ==item.name?'j_itemsq':'j_items'">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<u-line color="info" />
		<!-- 服务-->
		<view class="j_evaluate">
			<!-- top -->
			<view class="j_tops">
				<text class="j_once">服务</text>
				<text>积分</text>
				<text>+1</text>
			</view>
			<!-- bottom -->
			<view class="j_bottoms">
				<view v-for="item in lists" :key="item.id" @click="changes(item.name)"
					:class="satisfieds ==item.name?'j_itemsq':'j_items'">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<u-line color="info" />
		<!-- 意见和建议 -->
		<view class="j_opinion">
			<!-- top -->
			<view class="j_opinion_top">
				<text class="j_once">意见和建议</text>
				<text>积分</text>
				<text>+3</text>
			</view>
			<view class="j_opinion_bottom">
				<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight"
					placeholder="请针对产品和服务剔除意见和建议(可选填)" :disabled="disableds"/>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						name: '满意'
					},
					{
						id: 2,
						name: '一般'
					},
					{
						id: 3,
						name: '不满意'
					}
				],
				lists: [{
						id: 1,
						name: '满意'
					},
					{
						id: 2,
						name: '一般'
					},
					{
						id: 3,
						name: '不满意'
					}
				],
				satisfied: '满意',
				satisfieds: '满意',
				value: '',
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				jifen: [],
				num: 2,
				nums: 3,
				already: 1,
				alreadys:0,
				one:true,
				two:false,
				disableds:false
			}
		},
		methods: {
			//返回上一级页面
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//点击改变name属性
			change(name) {
				this.satisfied = name
			},
			changes(name) {
				this.satisfieds = name
			},
			//确定提交
			release() {
				if (this.value == '') {
					this.$api.jUpdateUserCredits({
						id: 1,
						kjf: Number(this.jifen[0].kjf) + this.num
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '评价成功',
								type: 'success',
								url: '/pages/person/myOrder/myOrder'
							})
							if(this.already == '1'){
								this.already ='0'
								localStorage.setItem('already', this.already)
							}
						}
					})
				} else if (this.value != '') {
					this.$api.jUpdateUserCredits({
						id: 1,
						kjf: Number(this.jifen[0].kjf) + this.nums
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '评价成功',
								type: 'success',
								url: '/pages/person/myOrder/myOrder'
							})
							if(this.already == '1'){
								this.already ='0'
								localStorage.setItem('already', this.already)
							}
						}
					})
				}
			}
		},
		onShow() {
			this.$api.CHYgetMsg().then(res => {
				this.jifen = res.data
			})
			//获取本地储存的数据
			if (localStorage.getItem('already')) {
				this.already = localStorage.getItem('already')
			}
			//判断是否评价
			if (this.already == '0') {
				this.one = false,
				this.two = true
				this.disableds = true
			}
			
		}

	}
</script>

<style lang="scss" scoped>
	//主体验证
	.j_cont {
		width: 100%;
		height: 100vh;
		background: #F2F2F2;

		//导航栏
		.j_top {
			width: 100%;
			height: 80upx;
			background: white;
			padding: 0 20upx;
			box-sizing: border-box;
			line-height: 80upx;
			display: flex;
			margin-bottom: 20upx;

			//left
			.j_left_icon {
				width: 10%;
				height: 100%;

				font-size: 40upx;
				text-align: center;
			}

			//title
			.j_title {
				width: 70%;
				height: 100%;
				text-align: center;
			}

			//right
			.j_ttip {
				width: 20%;
				height: 100%;
				text-align: center;
				color: #FAAB34;
				font-size: 30upx;
			}
		}
	}

	.j_evaluate {
		width: 100%;
		background: white;
		padding: 14upx 20upx 34upx 20upx;
		box-sizing: border-box;

		//top
		.j_tops {
			width: 100%;
			height: 50upx;
			text-indent: 30upx;
			line-height: 50upx;
			font-size: 18upx;

			text {
				margin-right: 10upx;
			}

			.j_once {
				font-size: 28upx;
			}
		}

		//下
		.j_bottoms {
			width: 100%;
			height: 60upx;
			display: flex;

			.j_items {
				width: 120upx;
				height: 60upx;
				border: 2upx solid #C9C9C9;
				text-align: center;
				line-height: 60upx;
				margin-left: 30upx;
				font-size: 20upx;
			}

			.j_itemsq {
				width: 120upx;
				height: 60upx;
				border: 2upx solid #FAAB34;
				text-align: center;
				line-height: 60upx;
				margin-left: 30upx;
				font-size: 20upx;
				color: #FAAB34;
			}
		}
	}

	//意见
	.j_opinion {
		width: 100%;
		background: white;
		padding: 10upx 20upx;
		box-sizing: border-box;

		.j_opinion_top {
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			text-indent: 30upx;
			font-size: 18upx;

			text {
				margin-right: 10upx;

			}

			.j_once {
				font-size: 28upx;
			}
		}

		//下
		.j_opinion_bottom {
			padding: 0 20upx;
			box-sizing: border-box;
		}
	}
</style>
